<template>
  <div class="host">
    <van-tabbar style="background-color: white" v-model="active" route>
      <van-tabbar-item
        :icon="item.icon"
        class="nav"
        v-for="(item, index) in navArr"
        :key="index"
        :to="{ name: item.name }"
        >{{ item.title }}
      </van-tabbar-item>
    </van-tabbar>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "Host",
  setup() {
    const active = ref(0)
    let navArr: Array<any> = [
      {
        title: "外卖",
        name: "Home",
        icon: "wap-home-o",
      },
      {
        title: "搜索",
        name: "Search",
        icon: "search",
      },
      {
        title: "订单",
        name: "Orders",
        icon: "orders-o",
      },
      {
        title: "我的",
        name: "My",
        icon: "user-o",
      },
    ];

    return {
      //数据
      active,
      navArr,
      
    };
  },
});
</script>

<style scoped>
</style>